<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header">
			<view class="header-left">
				<image src="/static/close.png" mode="" @click="back"></image>
				<span>预约安检</span>
			</view>
			<view class="header-right">
				<image src="/static/dian.png" mode=""></image>
			</view>
		</view>
		<!-- 内容 -->
		<view class="cotentBox">
			<!-- 个人信息 -->
			<view class="">
				<view class="boxTop"></view>
				<view class="boxInfo">
					<view class="infoHeader">
						<view class="infoXian"></view>
						<view class="infoText">核对个人信息</view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">气表号:</view>
							<view class="infoFormRight">{{info.meter_num}}</view>
						</view>
						<view class="infoHneg"></view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">姓名:</view>
							<view class="infoFormRight">{{info.realname}}</view>
						</view>
						<view class="infoHneg"></view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">电话:</view>
							<view class="infoFormRight">{{info.mobile}}</view>
						</view>
						<view class="infoHneg"></view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">身份证号:</view>
							<view class="infoFormRight">{{info.ID_num}}</view>
						</view>
						<view class="infoHneg"></view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">地址:</view>
							<view class="infoFormRight">{{info.adress}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 补充说明 -->
			<view class="supplement">
				<view class="explain">
					<textarea v-model="textAr" maxlength="200" auto-height @input="textChange" class="textArea" value="" placeholder="请补充说明您的需求" />
				</view>
				<view class="suppBottom">
					<view class="danger-img-box">
						<view class="danger-img" v-if="!img1" @click="handleUpdataImg">
							<image class="add" src="/static/updatePhoto.png" mode="" @click="flag = true"></image>
						</view>
						<view class="danger-img" v-else>
							<image class="delet" src="/static/delet.png" mode=""@click="deletImg"></image>
							<image class="realImg" :src='img1' @tap="seeimg(img1)"></image>
						</view>
					</view>
					<view class="num">
						<view class="">{{textNumber}}/200</view>
					</view>
				</view>
			</view>
			<!-- 预约时间 -->
			<view class="outDate">
				<view class="outDateTitle">
					<view class="infoXian"></view>
					<view class="">预约时间</view>
				</view>
				<view class="outDateBottom">
					<view class="outDateChange">请选择您要预约的时间</view>
					<view class="changeDate">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
						<image src="/static/calendar.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="cozy">
				<view class="cozyTitle">温馨提示:</view>
				<view class="">
					①户内改管涉及人工台班费185元（由工程量决定，半天以内最小可以算半个台班费），其余则根据现场工程量计算 
				</view>
				<view class="">
					②预约成功提交后，次日起五个工作日内（节假日顺延）将有工作人员提前与您预约上门时间，请留意电话！
				</view>
			</view>
			<view class="bottomBtn" @click="diately" :style="{'background':oubot ? 'linear-gradient(180deg,#bbbbbb, #999999)':'linear-gradient(180deg,#2366d5, #001b48)'}">
				立即预约
			</view>
		</view>
		
		<!-- 预约弹框 -->
		<view class="obuPoput" v-if="poputFlag">
			<view class="succeImg">
				<image src="/static/success.png" mode=""></image>
			</view>
			<view class="poputText">
				您已预约成功，请等待工作人 员上门，请保证预约时间有人 在家
			</view>
			<view class="poputBtn" @click="poputFlag = false">
				确定
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="zhezhao" v-if="poputFlag">
			
		</view>
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500" :maxWidth="800" :ql="0.7" type="url" />
		
	</view>
</template>

<script>
	import cpimg from "@/components/cpimg/cpimg.vue"
	
	export default{
		components: {
			cpimg
		},
		data() {
			
			return{
				info: {},
				img1: '',
				textNumber: 0,
				date: new Date().getFullYear() + '-' + (new Date().getMonth()+1) + '-' + new Date().getDate(),
				poputFlag: false,
				oubot: false,
				textAr: '',
				fileImg: ''
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
			})
			setTimeout(() => {
				this.getInfo()
			},10)
		},
		methods:{
			getInfo() {
				var that = this
				this.$request.request({
					url: '/Gaiguan/index',
					method: 'GET',
					data: {
						token: that.token
					}
				}).then(res => {
					that.info = res.data.data
				})
			},
			// 选择图片
			handleUpdataImg() {
				var that = this;
				 that.$refs.cpimg._changImg()
				/* uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function(res) {
						
						uni.uploadFile({
								url: that.$fileImg + '/common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData:{
									token: that.token
								},
								success(res1) {
									let dataPath = JSON.parse(res1.data)
									if(dataPath.code == 1) {
										that.fileImg = dataPath.data.url
										that.img1 = res.tempFilePaths[0]
									}
								
							}
						});
					}
				}); */
			},
			cpimgOk(file) {
				let that = this
				uni.showLoading({
					title:'上传中...'
				})
			
				// 上传图片
				uni.uploadFile({
					// url:'https://trq.aoaojiao.online/api/common/upload',
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData:{
						token: that.token
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						if(dataPath.code == 1) {
							that.fileImg = dataPath.data.url
							that.img1 = file[0]
							
						}
						
					uni.hideLoading()
				}
				,fail:()=>{
				  uni.hideLoading()
				 uni.showToast({
					title:'上传失败'
				 })
				}
			});
			
			},
			cpimgErr(e) {
			 uni.showToast({
				title:'上传失败',
				icon:'none'
			 })
				console.log(e)
			},
			textChange(e) {
				if(e.detail.cursor >= 200) {
					uni.showToast({
						title: '最多可以输入200个字',
						icon: 'none'
					})
				}
				this.textNumber = e.detail.cursor
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			diately() {
				let that = this
				if(that.oubot) {
					return
				}
				if(that.textAr == '') {
					uni.showToast({
						title: '请补充您的需求',
						icon: 'none'
					})
					return
				}
				if(that.img1 == '') {
					uni.showToast({
						title: '请上传需求图',
						icon: 'none'
					})
					return
				}
				if(that.date == '') {
					uni.showToast({
						title: '请选择您要预约的时间',
						icon: 'none'
					})
					return
				}
				that.$request.request({
					url: '/Gaiguan/UpGaiguan',
					method: 'POST',
					data: {
						token: that.token,
						remark: that.textAr,
						pic: that.fileImg,
						time: that.date
					}
				}).then(res => {
					if(res.data.code == 1) {
						that.poputFlag = true
						that.oubot = true
					}
				})
				
				
			},
			back() {
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.infoXian{
		width: 8upx;
		height: 28upx;
		background: #003690;
		border-radius: 2px;
		margin-right: 18upx;
	}
	.header{
		display: flex;
		justify-content:space-between;
		align-items: center;
		padding: 30upx 30upx;
		background-color: #fff;
		.header-left{
			display: flex;
			align-items: center;
			font-size: 32upx;
			font-weight: 500;
			color: #333;
			image{
				width: 24upx;
				height: 24upx;
				margin-right: 20upx;
			}
		}
		.header-right{
			display: flex;
			align-items: center;
			font-size: 24upx;
			color: #333;
			image{
				width: 52upx;
				height: 52upx;
				margin-right: 10upx;
			}
		}
	}
	.boxTop{
		height: 126upx;
		background: #003690;
	}
	.boxInfo{
		padding: 8upx;
		background-color: #fff;
		margin: 0 32upx;
		margin-top: -70upx;
		border-radius: 6upx;
		.infoHeader{
			display: flex;
			align-items: center;
			margin-bottom: 22upx;
			.infoText{
				font-size: 32upx;
				font-weight: 600;
				text-align: left;
				color: #003690;
			}
		}
		.infoBox{
			.infoForm{
				overflow: hidden;
				margin-bottom: 14upx;
				.infoFormLeft{
					float: left;
					font-size: 32upx;
					color: #333;
					margin-left: 34upx;
				}
				.infoFormRight{
					float: right;
					font-size: 24upx;
					color: #999999;
					margin-right: 22upx;
				}
			}
			.infoForm:last-child{
				margin-bottom: 0;
			}
			.infoHneg{
				border: 1upx solid #dddddd;
				margin-bottom: 14upx;
			}
		}
	}
	.supplement{
		margin: 20upx 24upx;
		background-color: #fff;
		position: relative;
		overflow: hidden;
		.explain{
			.textArea{
				min-height: 142upx;
				padding: 14upx 30upx;
				font-size: 32upx;
				text-align: left;
				color: rgba(187,187,187,0.84);
			}
		}
		.suppBottom{
			.danger-img{
				position: relative;
				margin-left: 50upx;
				margin-bottom: 0upx;
				width: 68upx;
				height: 68upx;
				float: left;
				image{
					width: 36upx;
					height: 36upx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
				}
			}
			.num{
				float: right;
				margin-right: 26upx;
			}
		}
	}
	.outDate{
		margin: 20upx 24upx;
		background-color: #fff;
		padding: 8upx;
		.outDateTitle{
			font-size: 32upx;
			font-weight: 600;
			text-align: left;
			color: #003690;
			display: flex;
			align-items: center;
			margin-bottom: 22upx;
		}
		.outDateBottom{
			margin-left: 18upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.outDateChange{
				font-size: 32upx;
				text-align: left;
				color: #333333;
			}
			.changeDate{
				display: flex;
				margin-right: 18upx;
				align-items: center;
				image {
					width: 32upx;
					height: 32upx;
				}
			}
		}
	}
	.cozy{
		margin: 24upx;
		font-size: 24upx;
		text-align: left;
		color: #c72b14;
		view{
			line-height: 36upx;
		}
	}
	.bottomBtn{
		border-radius: 40upx;
		width: 90%;
		text-align: center;
		color: #fff;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(180deg,#2366d5, #001b48);
		margin: 180upx auto 0;
	}
	.obuPoput{
		width: 446upx;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left:50%;
		transform: translate(-50%,-50%);
		z-index: 999;
		.succeImg{
			width: 100upx;
			height: 100upx;
			margin: 32upx auto 0;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.poputText{
			font-size: 32upx;
			text-align: left;
			color: #555555;
			letter-spacing: 1px;
			margin: 40upx 28upx 66upx;
			line-height: 36upx;
		}
		.poputBtn{
			width: 200upx;
			height: 64upx;
			line-height: 64upx;
			color: #fff;
			text-align: center;
			background: #003690;
			border-radius: 8px;
			margin: 0 auto 62upx;
		}
	}
	.zhezhao{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.2);
		z-index: 2;
	}
</style>
